<template>
    <div>
        <div class="box-class">
            <div class="box-content-class">
                <div class="left-class">
                    <div class="bg-class"></div>
                    <div class="login-class" v-if="!user.token">
                        <div class="title-class">欢迎登录</div>
                        <div class="title-desc-class">请使用您的账号登录</div>
                        <div>
                            <div class="input-box">
                                <label for="username" class="input-label">用户名：</label>
                                <input type="text" autocomplete="off" v-model="logParm.username" id="username" class="input-field"
                                    placeholder="请输入用户名" />
                                <span class="border-bottom"></span>
                            </div>
                            <div class="input-box">
                                <label for="password" class="input-label">密&nbsp;&nbsp;&nbsp;码：</label>
                                <input type="password" autocomplete="off" v-model="logParm.password" id="password" class="input-field"
                                    placeholder="请输入密码" />
                                <span class="border-bottom"></span>
                            </div>
                        </div>
                        <div class="felx-center-class">
                            <div class="btn-login-class" @click="loginBtn">
                                登录
                            </div>
                        </div>
                    </div>
                  <div class="logined" v-else>
                    <h2>代码问题，就找代码分析系统</h2>
                    <p>一家专注于代码自动化分析的工具</p>
                  </div>
                </div>
                <div class="right-class">
                    <img src="@/img/bg.svg" />
                </div>
            </div>
        </div>
    </div>
  <slider-verification-code ref="verificationRef" @success="login"/>
</template>
<script setup>
import { Login } from '@/api/user.js'
import { useUser } from "@/store/index.js";
import { ref, reactive } from "vue";
import { notification } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import SliderVerificationCode from "@/components/sliderVerificationCode.vue";
const user = useUser()
const router = useRouter();
const verificationRef = ref()
const logParm = reactive({
    username: "",
    password: ""
})

const openNotification = (desc) => {
    notification.open({
        key: "updatable",
        message: '提醒',
        description: desc,
    });
};

const isEmitey = (val) => {
    return val == undefined || val == '' || val == " "
}

const loginBtn = () => {
    if (isEmitey(logParm.username)) {
        openNotification("请输入用户名")
        return
    }
    if (isEmitey(logParm.password)) {
        openNotification("请输入密码")
        return
    }
    verificationRef.value.openVerification()
}
const login = () => {
  Login(logParm).then(res => {
    if (res.code != 200) {
      openNotification(res.data.message)
    } else {
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('user', JSON.stringify(res.data.user))
      user.token = res.data.token
      user.user = res.data.user
      router.push("/")
    }
  })
}
</script>
<style scoped lang="scss">
#captcha-div {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    //width: 100%;
    z-index: 999;
    height: 40vw;
}

.logined {
  color: #fff;
  text-align: center;
  p {
    margin-top: 20px;
  }
}

.captcha-box-class {
    width: 15%;
    height: 100%;
    display: flex;
    height: 2vw;
    justify-content: center;
    align-items: flex-start;

}

.captcha-img-class {
    border-radius: 20px;
    width: 90px;
    position: relative;
    height: 2vw;
}

.captcha-box-class::after {
    content: "";
    position: absolute;
    width: 92px;
    border-radius: 20px;
    height: 2.2vw;
    /* 设置遮罩层的颜色和透明度 */
    backdrop-filter: blur(0.8px);
    background-color: rgba(109, 109, 109, 0.5);
    /* 半透明黑色蒙版 */
}


.flex-box {
    display: flex;
    align-items: center;
}

.input-captcha {
    width: 40%;
    height: 2vw;
    border-radius: 32px;
    padding: 0 20px;
    outline: none;
    font-size: 0.9vw;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
}

.title-class {
    color: white;
    font-weight: bolder;
    font-size: 2vw;
    letter-spacing: 0.2cm;
}

.title-desc-class {
    color: white;
    font-weight: bolder;
    font-size: 0.7vw;
    letter-spacing: 0.2cm;
}

.bg01-class {
    position: relative;
    left: 216.83px;
    top: 131px;
    width: 445.57px;
    height: 244.03px;
    opacity: 1;
    border-radius: 12px;
    transform: skewX(-30.59deg);
    background: url(https://img.js.design/assets/img/64e70b6e9db1a5bbe01a97bc.png);

}

.bg02-class {
    position: relative;
    left: 216.83px;
    width: 445.57px;
    height: 244.03px;
    opacity: 1;
    border-radius: 12px;
    transform: skewX(-30.59deg);
    background: url(https://img.js.design/assets/img/64e70b6e9db1a5bbe01a97bc.png);

}

.felx-center-class {
    width: 50%;
    display: flex;
    justify-content: center;
    margin-top: 2vw;
}

.btn-login-class {
    left: 0px;
    top: 16px;
    width: 148px;
    height: 52px;
    opacity: 1;
    border-radius: 40px;
    background: rgba(255, 215, 0, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 24px 0px 24px;
}

.input-box {
    margin-top: 40px;
}

.left-class {
    width: 50%;
    height: 100%;
    display: grid;
    align-items: center;
    height: 100%;
}

.right-class {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: right;
    height: 100%;
    top: -100px;
    position: relative;
}

.login-class {
    position: relative;
}



.input-label {
    margin-right: 10px;
    color: #f2f2f2;
    font-size: 16px;
}

.input-field {
    width: 50%;
    height: 2vw;
    border-radius: 32px;
    padding: 0 20px;
    outline: none;
    font-size: 0.9vw;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    margin-top: 10px;

}

.input-field::placeholder {
    color: rgba(80, 80, 80, 1);
}


.input-field:focus~.border-bottom {
    width: 100%;
}

.input-field::placeholder {
    color: #999;
}

.open-flex-class {
    color: wheat;
}

.bg-class {
    margin-top: 10vw;
    margin-left: 10vw;
    left: 280.91px;
    position: absolute;
    top: -24.29px;
    width: 734.76px;
    height: 435.63px;
    opacity: 1;
    transform: rotate(37.57deg);
    background: linear-gradient(90deg, rgba(240, 0, 240, 0.1) 0%, rgba(0, 128, 255, 0.1) 45.84%, rgba(21, 0, 255, 0.1) 100%);
    filter: blur(100px);
    display: flex;
}

.box-class {
    width: 100%;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-content-class {
    width: 90%;
    height: 70%;
    display: flex;
}
</style>